<template>
    <el-dialog title="详情" :show-close="false" :visible="visible">
        <el-form
            :model="form"
            :ref="formRef"
            label-width="100px"
            :size="$formSize"
        >
            <el-form-item label="被评论文章">
                <el-col :span="12">
                    <el-input
                        v-model.trim="form.article_title"
                        disabled
                    ></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="文章类型">
                <el-select v-model="form.category_id" disabled>
                    <el-option
                        v-for="v in categorys"
                        :key="v.id"
                        :label="v.title"
                        :value="v.id"
                    />
                </el-select>
            </el-form-item>

            <template v-if="form.comment_level == 2 && !status">
                <el-form-item label="父评论用户名">
                    <el-col :span="12">
                        <div class="el-form-wrap">
                            <el-input
                                v-model.trim="form.parent_user_name"
                                disabled
                            ></el-input>
                            <span v-if="form.parent_host == 1">
                                ({{
                                    form.parent_role == 1 ? "博主" : "管理员"
                                }})
                            </span>
                        </div>
                    </el-col>
                </el-form-item>
                <el-form-item label="父评论内容">
                    <el-col :span="20">
                        <div class="el-form-wrap">
                            <div class="el-input is-disabled">
                                <div
                                    class="el-input__inner"
                                    v-html="form.parent_content"
                                ></div>
                            </div>
                            <span v-if="form.parent_host == 1">
                                ({{
                                    form.parent_role == 1 ? "博主" : "管理员"
                                }})
                            </span>
                        </div>
                    </el-col>
                </el-form-item>
            </template>

            <template>
                <el-form-item label="评论用户名">
                    <el-col :span="12">
                        <div class="el-form-wrap">
                            <el-input
                                v-model.trim="form.user_name"
                                disabled
                            ></el-input>
                            <span v-if="form.host == 1">
                                ({{ form.user_role == 1 ? "博主" : "管理员" }})
                            </span>
                        </div>
                    </el-col>
                </el-form-item>
                <el-form-item label="评论内容">
                    <el-col :span="20">
                        <div class="el-form-wrap">
                            <div class="el-input is-disabled">
                                <div
                                    class="el-input__inner"
                                    v-html="form.content"
                                ></div>
                            </div>
                            <span v-if="form.host == 1">
                                ({{ form.role == 1 ? "博主" : "管理员" }})
                            </span>
                        </div>
                    </el-col>
                </el-form-item>
            </template>

            <template v-if="form.comment_level == 2">
                <el-form-item label="被回复用户名">
                    <el-col :span="12">
                        <div class="el-form-wrap">
                            <el-input
                                v-model.trim="form.reply_user_name"
                                disabled
                            ></el-input>
                            <span v-if="form.reply_host == 1">
                                ({{ form.reply_role == 1 ? "博主" : "管理员" }})
                            </span>
                        </div>
                    </el-col>
                </el-form-item>
                <el-form-item label="被回复内容">
                    <el-col :span="20">
                        <div class="el-form-wrap">
                            <div class="el-input is-disabled">
                                <div
                                    class="el-input__inner"
                                    v-html="form.reply_content"
                                ></div>
                            </div>
                            <span v-if="form.reply_host == 1">
                                ({{ form.reply_role == 1 ? "博主" : "管理员" }})
                            </span>
                        </div>
                    </el-col>
                </el-form-item>
            </template>

            <el-form-item
                :label="form.comment_level == 1 ? '评论时间' : '回复时间'"
            >
                <el-date-picker
                    type="datetime"
                    :value="form.created_time | formatTime"
                    disabled
                ></el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button :size="$btnSize" @click="visible = false">
                关 闭
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import { comment as Api } from "api";

export default {
    props: {
        id: {
            type: [Number, String],
        },
    },
    data() {
        return {
            loading: false, // 按钮等待
            visible: false, // 弹窗开关
            status: false, // 判断父评论与被回复是否对等

            categorys: [],

            // 表单
            formRef: "formRef", // ref

            form: {
                category_id: 42, // 文章分类
                article_title: "", // 文章标题
                comment_level: 1, // （1：评论(默认)，2：回复）

                parent_user_name: "", // 父评论用户名
                parent_content: "", // 父评论内容

                user_name: "", // 当前评论用户名
                content: "", // 当前评论内容

                reply_user_name: "", // 回复的评论用户名
                reply_content: "", // 回复的评论内容

                created_time: "", // 评论时间
            },
        };
    },
    methods: {
        init() {
            this.getCategory();
            this.getById();
        },

        /* 获取文章分类列表 */
        async getCategory() {
            const { code, msg, data } = await this.$axios.get(Api.getCategory);

            if (code == 200) {
                this.categorys = data.list;
            }
        },

        async getById() {
            const { code, msg, data } = await this.$axios.get(Api.getById, {
                params: { id: this.id },
            });

            let list = data.list[0];

            this.status =
                list.parent_comment_id == list.reply_comment_id &&
                list.parent_comment_user_id == list.reply_comment_user_id;

            if (code == 200) {
                this.form = {
                    ...list,
                };
            }
        },
    },
    watch: {
        // 监听弹窗开关状态来控制组件的初始化
        visible(status) {
            status ? this.init() : this.$refs[this.formRef].resetFields();
        },
    },
};
</script>

<style lang="less" scoped>
.el-input__inner {
    height: auto;
}
</style>